import React, { useState } from 'react';
import { Form, Input, Modal, Radio, Select } from 'antd';

const { Option } = Select;

const FormItem = Form.Item;

export interface UpdateFormProps {
  onCancel: () => void;
  onSubmit: (values: API.SysDeviceAttrItem) => void;
  updateModalVisible: boolean;
  values:  API.SysDeviceAttrItem;
  devicetype?:API.DictItem[];
}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [formVals] = useState<API.SysDeviceAttrItem>(props.values);
  const [form] = Form.useForm();
console.log(formVals)
  const { updateModalVisible, onSubmit: handleUpdate,  onCancel} = props;

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    fieldsValue.attrId = formVals.attrId;
    form.resetFields();
    handleUpdate(fieldsValue);
 
  };

  
  const validatorValue = async (_: any, value: string) => {
    const promise = Promise;
    if(Number(value)>999999999999){
      return promise.reject("值不能超过99999999999");
    }
    if(_.field=='maxValue'&&Number(value)<Number(form.getFieldValue('minValue'))){
      return promise.reject("最大值不能小于最小值");
    }
    return promise.resolve();
  };

  return (
    <Modal
      width={640}
     
      destroyOnClose
      title="编辑设备变量"
      visible={updateModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
       <Form
        {...formLayout}
        form={form}
        initialValues={formVals.deviceAttr}
      >
        <FormItem
          label="变量名称"
          name="dispalyName"
          rules={[{ required: true,  min: 2 ,  max: 64}]}
        >
          <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
        <FormItem
          label="页面展示名称"
          name="browseName"
          rules={[{ required: true,  min: 2 ,  max: 64 }]}
        >
          <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
        <FormItem
          label="单位"
          name="unit"
          rules={[{  max: 16}]}
        >
          <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
        <FormItem
          label="数据类型"
          name="dataType"
          rules={[{ required: true}]}
        >
          <Select placeholder="请选择">
            <Option key={1} value={'int'}>整数</Option>
            <Option key={1} value={'decimal'}>小数</Option>
            <Option key={2} value={'varchar'}>字符串</Option>
            <Option key={3} value={'datatime'}>时间</Option>
            <Option key={4} value={'data'}>日期</Option>
          </Select>
        </FormItem>
        <FormItem
          label="最小值"
          name="minValue"
          rules={[ { validator: validatorValue}]}
        
        >
         <Input type="number" placeholder="请输入"   />
        </FormItem>
        <FormItem
          label="最大值"
          name="maxValue"
          rules={[ { validator: validatorValue}]}
        
        ><Input type="number" placeholder="请输入"   />
       
        </FormItem>
        <FormItem
          label="启用状态"
          name="useState"
        >
          <Radio.Group>
            <Radio value={1} >
              启用
            </Radio>
            <Radio value={0}>
              禁用
            </Radio>
          </Radio.Group>
        </FormItem>
      </Form>
     
    </Modal>
  );
};

export default UpdateForm;
